<!--
Copyright 2016 The Chromium Authors
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<if expr="is_android or is_ios">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</if>
<title>NTP Tiles Internals</title>
<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
<link rel="stylesheet" href="chrome://resources/css/list.css">
<link rel="stylesheet" href="ntp_tiles_internals.css">
<script type="module" src="ntp_tiles_internals.js"></script>
</head>

<body>
<div>
  <div id="sources" class="section">
    <h2>Sources</h2>
    <table class="section-details">
      <tbody jsselect="topSites">
        <tr>
          <th colspan="2">TOP_SITES</th>
        </tr>
        <tr>
          <td class="detail">enabled</td>
          <td class="value" jsdisplay="$this">yes</td>
          <td class="value" jsdisplay="!$this">no</td>
        </tr>
      </tbody>
      <tbody jsselect="popular">
        <tr>
          <th colspan="2">POPULAR</th>
        </tr>
        <tr jsdisplay="$this">
          <td class="detail">URL</td>
          <td class="value"><input id="override-url" type="text" jsvalues="value:overrideURL;placeholder:url"></td>
        </tr>
        <tr jsdisplay="$this">
          <td class="detail">Country</td>
          <td class="value"><input id="override-directory" type="text" jsvalues="value:overrideDirectory;placeholder:directory"></td>
        </tr>
        <tr jsdisplay="$this">
          <td class="detail">Country</td>
          <td class="value"><input id="override-country" type="text" jsvalues="value:overrideCountry;placeholder:country"></td>
        </tr>
        <tr jsdisplay="$this">
          <td class="detail">Version</td>
          <td class="value"><input id="override-version" type="text" jsvalues="values:overrideVersion;placeholder:version"></td>
        </tr>
        <tr jsdisplay="$this">
          <td class="detail">
            <input id="popular-view-json" type="submit", value="View JSON">
          </td>
          <td class="value"><pre id="popular-json-value" jscontent="json"></pre></td>
        </tr>
        <tr jsdisplay="!$this">
          <td class="detail">enabled</td>
          <td class="value">no</td>
        </tr>
      </tbody>
      <tbody jsselect="customLinks">
        <tr>
          <th colspan="2">CUSTOM_LINKS</th>
        </tr>
        <tr>
          <td class="detail">enabled</td>
          <td class="value" jsdisplay="$this">yes</td>
          <td class="value" jsdisplay="!$this">no</td>
        </tr>
      </tbody>
      <tbody jsselect="allowlist">
        <tr>
          <th colspan="2">ALLOWLIST</th>
        </tr>
        <tr>
          <td class="detail">enabled</td>
          <td class="value" jsdisplay="$this">yes</td>
          <td class="value" jsdisplay="!$this">no</td>
        </tr>
        <tr jsskip="true">
          <th colspan="2"><input id="submit-update" type="submit" value="Update"></th>
        </tr>
      </tbody>
    </table>
  </div>

  <div id="sites" class="section">
    <h2>Sites</h2>
    <table class="section-details">
      <tbody jsselect="sites">
        <tr>
          <th colspan="2" jscontent="title"></th>
        </tr>
        <tr>
          <td class="detail">Source</td>
          <td class="value" jsdisplay="source &lt; 0">???</td>
          <td class="value" jsdisplay="source == 0">TOP_SITES</td>
          <td class="value" jsdisplay="source == 1">POPULAR</td>
          <td class="value" jsdisplay="source == 2">POPULAR_BAKED_IN</td>
          <td class="value" jsdisplay="source == 3">CUSTOM_LINKS</td>
          <td class="value" jsdisplay="source == 4">ALLOWLIST</td>
          <td class="value" jsdisplay="source == 5">HOMEPAGE</td>
          <td class="value" jsdisplay="source &gt; 6">???</td>
        </tr>
        <tr>
          <td class="detail">URL</td>
          <td class="value"><a jsvalues="href:url" jscontent="url"></a></td>
        </tr>
        <tr jsselect="icons">
          <td class="detail" jscontent="type"></td>
          <td class="value"><a jsvalues="href:url"
              jscontent="url"></a>
            (<span jscontent="width + 'x' + height"></span>
            <span class="value" jsdisplay="onDemand">, on-demand</span>)
          </td>
        </tr>
        <tr jsdisplay="fromMostVisited != null">
          <td class="detail">From Most Visited</td>
          <td class="value" jsdisplay="fromMostVisited">yes</td>
          <td class="value" jsdisplay="!fromMostVisited">no</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

</body>
</html>
